<template>
  <div class="sku">
    <h2>邻接矩阵</h2>
    <div class="sku-box">
        <div class="goods-specs-list" v-for="({title,list},index) in commoditySpecs" :key="list.id">
            <div class="goods-title">{{title}}</div>
            <button :disabled="optionSpecs.indexOf(item) == -1" :class="{'option': optionSpecs.includes(item),'active': specsS.includes(item)}" @click="chooseItem(optionSpecs.includes(item), item, index)" v-for="(item,i) in list" :key="i" class="goods-specs-item">{{item}}</button>
        </div>
    </div>
  </div>
</template>

<script>
import { ShopAdjoin } from '../assets/js/Adjoin'
export default {
  data () {
    return {
      optionSpecs: [],
      specsS: [],
      ShopAdjoin: null,
      data: [
        { id: '1', specs: [ '紫色', '套餐一', '64G' ] },
        { id: '2', specs: [ '红色', '套餐二', '128G' ] },
        { id: '3', specs: [ '紫色', '套餐二', '128G' ] },
        { id: '4', specs: [ '黑色', '套餐三', '256G' ] }
      ],
      commoditySpecs: [
        { title: '颜色', list: [ '红色', '紫色', '白色', '黑色' ] },
        { title: '套餐', list: [ '套餐一', '套餐二', '套餐三', '套餐四' ] },
        { title: '内存', list: [ '64G', '128G', '256G' ] }
      ]
    }
  },
  created () {
    this.initShopAdjoin()
  },
  watch: {
    specsS (val) {
      this.optionSpecs = this.shopAdjoin.querySpecsOptions(val)
    }
  },
  methods: {
    //   初始化购物矩阵
    initShopAdjoin () {
      this.specsS = Array.from({ length: this.commoditySpecs.length })
      // 创建一个购物矩阵
      this.shopAdjoin = new ShopAdjoin(this.commoditySpecs, this.data)
      // 获得可选项表
      this.optionSpecs = this.shopAdjoin.querySpecsOptions(this.specsS)
    },
    chooseItem (bool, text, index) {
      if (this.specsS[index] !== text && !bool) return
      this.$set(this.specsS, index, this.specsS[index] === text ? '' : text)
    }
  }
}

</script>

<style lang="scss" scpoed>
.sku-box{
    width: 360px;
    min-height: 367px;
    border-radius: 15px;
    border: 1px solid #999;
    .goods-specs-list{
        padding: 16px;
        .goods-title{
            color: #000;
            font-weight: 700;
            margin-bottom: 9px;
        }
        .goods-specs-item{
            background: rgba(238,238,238,.5);
            border: 1px solid rgba(238,238,238,.5);
            display: inline-block;
            padding: 3px 10px;
            border-radius: 3px;
            margin-right: 10px;
            cursor: pointer;
            font-size: 14px;
            outline: none;
            &.active{
                border: 1px solid salmon;
                color: salmon;
            }
            &[disabled]{
                color: #999;
                cursor: not-allowed;
                border: 1px dashed #999;
            }
        }
    }
}
</style>
